<style scoped>
    #recommend-feed h2 {
        display: block;
        padding: 15px 18px 15px 0;
        text-align: center;
        position: relative;
        font-size: 18px;
        color: #111;
        min-width: 4em;
        margin-bottom: 0;
        font-weight: normal;
    }
    #recommend-feed>div>div:first-child h2{
        display: none;
    }
    #recommend-feed h2:before {
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background: #e3e3e3;
        -webkit-transform: scaleY(0.5);
        content: '';
        position: absolute;
        -webkit-transform-origin: 0 bottom;
    }
    #recommend-feed h2:after {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #e3e3e3;
        -webkit-transform: scaleY(0.5);
        content: '';
        position: absolute;
        -webkit-transform-origin: 0 bottom;
    }
    #recommend-feed .feed-item {
        display: block;
        padding: 25px 18px 25px 0;
        margin-left: 18px;
        position: relative;
        color: #494949;
    }
    #recommend-feed .feed-item ~ .feed-item::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        background: #e3e3e3;
        -webkit-transform: scaleY(0.5);
        content: '';
        position: absolute;
        -webkit-transform-origin: 0 bottom;
    }
    #recommend-feed .feed-content {
        overflow: hidden;
        margin-bottom: 10px;
    }
    #recommend-feed .feed-content .cover {
        width: 25.6%;
        margin-left: 25px;
        float: right;
    }
    #recommend-feed .feed-content h3 {
        text-align: justify;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.41;
        color: #494949;
        margin-bottom: 6px;
        word-wrap: break-word;
        margin: 0;
        padding: 0;
    }
    #recommend-feed .feed-content p {
        overflow: hidden;
        text-align: justify;
        color: #aaa;
        font-size: 12px;
        line-height: 1.5;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        word-wrap: break-word;
        margin: 0;
        padding: 0;
    }
    #recommend-feed .feed-item .author {
        font-size: 12px;
        color: #ccc;
    }
    #recommend-feed .feed-item .author {
        font-size: 12px;
        color: #ccc;
    }
    #recommend-feed .feed-item .feed-label {
        position: absolute;
        bottom: 25px;
        right: 18px;
        font-size: 12px;
        color: #ccc;
    }
    #recommend-feed .feed-content .photos {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 10px;
    }
    #recommend-feed .feed-content .photos .main {
        -webkit-box-flex: 3.2;
        -webkit-flex: 3.2;
        -ms-flex: 3.2;
        flex: 3.2;
        margin-right: 4px;
    }
    #recommend-feed .feed-content .photos .aside {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    #recommend-feed .feed-content .photos .aside .aside-pic {
        position: relative;
    }
    #recommend-feed .feed-content .photos .aside .aside-pic ~ .aside-pic {
        margin-top: 4px;
    }
    #recommend-feed .feed-content .photos .more-pic {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.4);
        color: #fff;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    #recommend-feed .feed-content .photos .more-pic .count {
        width: 100%;
    }
</style>

<template>
    <div class="feed-section">
        <h2>{{listData.date}}</h2>
        <router-link class="feed-item" to="/" v-for="(item ,i) in listData.recommend_feeds" key="{{i}}" >
            <div v-if="item.layout == 1">
                <div class="feed-content">
                    <div class="cover" :style="'position: relative; background: url(&quot;'+item.target.cover_url+'&quot;) center center / cover no-repeat rgb(250, 250, 250);'">
                        <div style="padding-top: 100%;"></div>
                    </div>
                    <h3>{{item.title}}</h3>
                    <p>{{item.target.desc}}</p>
                </div>
                <div class="author">by&nbsp;<span class="name">{{item.target.author.name}}</span></div>
                <span class="feed-label">{{item.source_cn}}</span>
            </div>
            <div v-else-if="item.layout == 2">
                <div class="feed-content">
                    <div class="cover" :style="'position: relative; background: url(&quot;'+item.target.cover_url+'&quot;) center center / cover no-repeat rgb(250, 250, 250);'">
                        <div style="padding-top: 100%;">
                    </div>
                </div>
                <h3>{{item.title}}</h3>
                <p>{{item.target.desc}}</p>
                </div><div class="author">by&nbsp;<span class="name">{{item.target.author.name}}</span></div>
                <span class="feed-label">{{item.source_cn}}</span>
            </div>
            <div v-else>
                <div class="feed-content">
                    <div class="photos">
                        <div class="main" :style="'position: relative; background: url(&quot;'+item.target.cover_url+'&quot;) center center / cover no-repeat rgb(250, 250, 250);'">
                            <div></div>
                        </div>
                        <div class="aside">
                            <div class="aside-pic">
                                <div :style="'position: relative; background: url(&quot;'+item.target.more_pic_urls[0]+'&quot;) center center / cover no-repeat rgb(250, 250, 250);'">
                                    <div style="padding-top: 100%;"></div>
                                </div>
                            </div>
                            <div class="aside-pic">
                                <div :style="'position: relative; background: url(&quot;'+item.target.more_pic_urls[1]+'&quot;) center center / cover no-repeat rgb(250, 250, 250);'">
                                    <div style="padding-top: 100%;"></div>
                                </div>
                                <div class="more-pic">
                                    <span class="count">{{item.target.photos_count-3}} + </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h3>{{item.title}}</h3>
                </div>
                <div class="author">by&nbsp;<span class="name">{{item.target.author.name}}</span></div>
                <span class="feed-label"></span>
            </div>
        </router-link>
    </div>
</template>
<!-- js -->
<script>
    export default {
        props: ['listData']
    }
</script>

